import {Link, useNavigate} from 'react-router-dom'
import {Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm, message} from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
// 导入资源
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import img404 from '@/assets/error.png'
import {useChannel} from "@/hook/useChannel";
import {useEffect, useState} from "react";
import {deleteArticle, getArticleList} from "@/api/article";

const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
    const statusEnum = {
        1: <Tag color="warning">待通过</Tag>,
        2: <Tag color="success">审核通过</Tag>,
        3: <Tag color="error">审核不通过</Tag>
    }
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: data => statusEnum[data]
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => { navigate(`/publish?id=${data.id}`) }} />
                        <Popconfirm
                            title="Delete the task"
                            description="Are you sure to delete this task?"
                            onConfirm={toDelete(data)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button
                                type="primary"
                                danger
                                shape="circle"
                                icon={<DeleteOutlined />}
                            />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    const navigate = useNavigate()
    const {channelList} = useChannel()
    const [tableList, setTableList] = useState([])
    const [count, setCount] = useState(0)
    const [params, setParams] = useState({
        status: '',
        channel_id: '',
        begin_pubdate: '',
        ebd_pubdate: '',
        page: 1,
        per_page: 4
    })
    const onFinish = (formData) => {
        setParams({
            ...params,
            status: formData.status,
            channel_id: formData.channel_id,
            begin_pubdate: formData.date[0].format('YYYY-MM-DD'),
            ebd_pubdate: formData.date[1].format('YYYY-MM-DD')
        })
    }
    const onPageChange = currentPage => {
        setParams({
            ...params,
            page: currentPage
        })
    }
    const toDelete = ({ id }) => async () => {
        await deleteArticle(id)
        setParams({...params})
        message.success('删除成功')
    }
    useEffect(() => {
        const getDataList = async () => {
            const {data: { total_count, results }} = await getArticleList(params)
            setTableList(results)
            setCount(total_count)
        }
        getDataList()
    }, [params]);
    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '文章列表' },
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: '' }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={''}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="频道" name="channel_id">
                        <Select
                            placeholder="请选择文章频道"
                            style={{ width: 240 }}
                        >
                            {
                                channelList.map(({id, name}) => (
                                    <Option key={id} value={id}>{name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示*/}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                            筛选
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
            <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
                <Table rowKey="id" columns={columns} dataSource={tableList} pagination={{
                    total: count,
                    pageSize: params.per_page,
                    onChange: onPageChange
                }} />
            </Card>
        </div>
    )
}

export default Article
